<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item v-for="(item, index) in breadList" :key="index" :to="{ path: item.path }">{{
                    item.meta.title
                }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div>
                <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" status-icon>
                    <el-form-item label="景点名称" prop="attractionName">
                        <el-input v-model="ruleForm.attractionName" />
                    </el-form-item>
                    <el-form-item label="景点类型" prop="attractionCategory">
                        <el-radio-group v-model="ruleForm.attractionCategory">
                            <el-radio :label="0">暂无</el-radio>
                            <el-radio :label="1">AA景区</el-radio>
                            <el-radio :label="2">AAA景区</el-radio>
                            <el-radio :label="3">AAAA景区</el-radio>
                            <el-radio :label="5">AAAAA景区</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="景点详情" prop="attractionDesc">
                        <el-input v-model="ruleForm.attractionDesc" />
                    </el-form-item>
                    <el-form-item label="景点内容" prop="attractionContent">
                        <el-input v-model="ruleForm.attractionContent" />
                    </el-form-item>
                    <el-form-item label="开/闭园时间" prop="attractionContent">
                        <div class="demo-time-range">
                            <el-time-select v-model="ruleForm.openedAt" :max-time="ruleForm.closedAt" class="mr-4"
                                placeholder="Start time" start="06:30" step="00:15" end="12:30" />
                            <el-time-select v-model="ruleForm.closedAt" :min-time="ruleForm.openedAt" placeholder="End time"
                                start="06:30" step="00:15" end="22:00" />
                        </div>
                    </el-form-item>

                    <el-form-item label="景点图片" prop="titleImageUrl">
                        <!--  <el-input v-model="ruleForm.titleImageUrl" />-->
                        <!--  -->
                        <el-upload action="#" :multiple="false" accept=".jpg,.jpeg,.png,.svg" :limit="1"
                            :show-file-list="true" list-type="picture-card" @change="handelFileChange">
                            <el-image class="avatar" v-if="imageUrl" :src="imageUrl" />
                            <el-icon v-else>
                                <Plus />
                            </el-icon>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="景区状态" prop="status">
                        <el-radio-group v-model="ruleForm.status">
                            <el-radio :label="0">停用</el-radio>
                            <el-radio :label="1">正常</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
            </div>
            <div>
                <el-button type="primary" @click="submitForm(ruleFormRef)">新增</el-button>
                <el-button @click="resetForm(ruleFormRef)">重置表单</el-button>
            </div>
        </div>
    </div>
</template>
<script>
import { useRouter, useRoute } from 'vue-router'
import { ref, reactive, watch } from "vue";
import request from "../../utils/request";
import { ElNotification } from "element-plus";
export default {
    setup() {
        const router = useRouter()
        const route = useRoute()
        let breadList = [] // 路由集合
        const getBreadcrumb = (url) => {
            let matched = url.matched;
            //如果不是首页
            if ("Home" == matched[0].name) {
                matched[0].meta = { title: "系统首页" }
            }
            breadList = matched;
        }
        watch(route, (newValue, oldValue) => {
            // console.log(222222,newValue)
            getBreadcrumb(newValue)
        }, { deep: true, immediate: true });

        const resetForm = (formEl) => {
            if (!formEl) return;
            formEl.resetFields();
        };

        const ruleForm = ref({
            attractionName: "",
            attractionCategory: 0,
            attractionDesc: "",
            attractionContent: "",
            openedAt: "",
            closedAt: "",
            status: 1,
        });
        const rules = reactive({
            username: [
                {
                    required: true,
                    message: "请输入用户名",
                    trigger: "blur",
                },
            ],
            password: [
                {
                    required: true,
                    message: "请输入密码",
                    trigger: "blur"
                },
                {
                    min: 1,
                    max: 7,
                    message: "长度大于1小于7",
                    trigger: "blur",
                },
            ],
            tel: [
                {
                    required: true,
                    message: "请输入电话号码",
                    trigger: "blur",
                },
            ],
            email: [
                {
                    required: true,
                    message: "请输入邮箱",
                    trigger: "blur"
                },
            ],
            type: [
                {
                    required: true,
                    message: "请选择用户类型",
                    trigger: "change",
                },
            ],
            status: [
                {
                    required: true,
                    message: "请选择用户状态",
                    trigger: "change",
                },
            ],
        });
        const ruleFormRef = ref();
        const formData = ref(null)
        const centerDialogVisible = ref(false);
        // 处理添加方法的参数数据
        /*  const processFormData = () => {
 
             const formData = new FormData()
             formData.append('attractionName', ruleForm.value.attractionName)
             formData.append('attractionCategory', Number(ruleForm.value.attractionCategory))
             formData.append('attractionDesc', ruleForm.value.attractionDesc)
             formData.append('attractionContent', ruleForm.value.attractionContent)
             formData.append('openedAt', ruleForm.value.openedAt)
             formData.append('closedAt', ruleForm.value.closedAt)
             formData.append('status', ruleForm.value.status)
             if (selectedFile.value) {
                 const fileName = selectedFile.value.name
                 formData.append('files', selectedFile.value, fileName)
             }
             return formData
         } */
        const selectedFile = ref(null)
        //增加景点
        const submitForm = async (formEl) => {

            if (!formEl) return;
            await formEl.validate((valid, fields) => {
                if (valid) {
                    // console.log(imageUrl.value,2222,selectedFile.value );
                    //上传图片
                    var formdata = new FormData();
                    formdata.append("imagefile", selectedFile.value);
                    request
                        .request({
                            url: "/attraction/aimage",
                            method: "post",
                            data: formdata,
                            headers: { "Content-Type": "multipart/form-data" },
                        })
                        .then((res) => {
                            const paths = res.data.data.payload;
                            console.log(paths);
                            // console.log("提交更新", fields);
                            request
                                .request({
                                    url: "/attraction/add",
                                    method: "post",
                                    data: {
                                        attractionName: ruleForm.value.attractionName,
                                        attractionCategory: ruleForm.value.attractionCategory,
                                        attractionDesc: ruleForm.value.attractionDesc,
                                        attractionContent: ruleForm.value.attractionContent,
                                        openedAt: ruleForm.value.openedAt,
                                        closedAt: ruleForm.value.closedAt,
                                        status: ruleForm.value.status,
                                        attractionImage:paths[0]
                            },
                                })
                                .then((res) => {
                                    if (res.data.code == 200) {
                                        ElNotification({
                                            title: "添加成功",
                                            message: "成功添加景点信息",
                                        });
                                        router.push('attractionInfo')
                                    } else {
                                        ElNotification({
                                            title: "添加失败",
                                            message: "请联系管理员检查失败原因",
                                        });
                                    }
                                })
                                .catch((e) => {
                                    ElNotification({
                                        title: "添加失败",
                                        message: "请联系管理员检查失败原因",
                                    });
                                });
                        });


                } else {
                    ElNotification({
                        title: "校验失败",
                        message: "请重新填写信息",
                    });
                }
            });
        }
        /* 
              const submitForm = async (ruleFormRef) => {
                formData.value = processFormData()
                if (!ruleFormRef) return
                await ruleFormRef.validate((valid, fields) => {
                  if (valid) {
                    // console.log("提交更新", fields);
                    request
                      .request({
                        url: '/attraction/add',
                        method: 'post',
                        data: formData.value,
                        timeout: 4000,
                        headers: { "Content-Type": "multipart/form-data" },
                      })
                      .then((res) => {
                        console.log(res, '9999999')
                        if (res.data.code == 200) {
                          ElNotification({
                            title: '增加成功',
                            message: '成功增加景点信息',
                          })
                        } else {
                          ElNotification({
                            title: '更新失败1',
                            message: '请联系管理员检查失败原因',
                          })
                        }
                      })
                      .catch((e) => {
                        console.log(e)
                        ElNotification({
                          title: '更新失败2',
                          message: '请联系管理员检查失败原因',
                        })
                      })
                  } else {
                    ElNotification({
                      title: '校验失败',
                      message: '请重新填写信息',
                    })
                  }
                })
              }
               */
        // 获取文件数据
        const imageUrl = ref('')
        const handelFileChange = (file) => {
            selectedFile.value = file.raw;
            imageUrl.value = URL.createObjectURL(file.raw);
            console.log(file.raw)
        }

        return {
            breadList,
            resetForm,
            ruleFormRef,
            ruleForm,
            rules,
            centerDialogVisible,
            submitForm,
            handelFileChange,
            formData,
            selectedFile,
            imageUrl
        };
    },
};
</script>
<style lang="scss" scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}

.table {
    width: 100%;
    font-size: 14px;
}

.red {
    color: #ff0000;
}

.mr10 {
    margin-right: 10px;
}

.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}


.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}

.el-upload-list__item.is-ready,
.el-upload-list__item.is-uploading {
    display: none !important;
}
</style>
  